<!--
  功能：
  作者：parker
  邮箱：geekpark@icloud.com
  微信：wzb10746
  时间：2023年08月21日 20:23:31
  版本：
  文件: src/pages/tabbar/my.vue
-->

<script setup>
import { onUnmounted, reactive, ref, toRefs, getCurrentInstance, onMounted, nextTick, computed } from 'vue'
import BScroll from 'better-scroll'
import {
    onLoad
} from "@dcloudio/uni-app"
let slide = {}

const currentPageIndex = ref(0)
const slideRef = ref(null)
const currentIndex = ref(0)
const reactData = reactive({
	videoList: []
})

const filterItemData = (item) => {
	const { like_num, collect_num, share_num, comment } = item
	return [
		{
		iconName: 'heart',
		count: like_num,
		id: 1 ,
		},
		{
		iconName: 'star',
			count: collect_num,
		id: 2,
		},{
		iconName: 'share-square',
			count: share_num,
		id: 3,
		},{
		iconName: 'chat',
			count: comment,
		id: 4
		}
	]
}
 const _onScrollEnd = ()=> {
	 let pageIndex = slide.getCurrentPage().pageY
		console.log({pageIndex})
        // currentPageIndex.value = pageIndex
 }

onLoad(async () => {
	const { proxy } = getCurrentInstance()
	setTimeout(() => {
		slide = new BScroll('.slide-vertical-wrapper', {
			scrollX: false,
			scrollY: true,
			slide: {
				threshold: 10,
				loop:false,
				autoplay:false,
			},
			useTransition: true,
			
			momentum: false,
			bounce: false,
			stopPropagation: true,
			specifiedIndexAsContent: 1,
			probeType: 2
		})
		slide.on('scrollEnd', _onScrollEnd)
		slide.on('slideWillChange', (page) => {
       	 	currentPageIndex.value = page.pageY
  		})
		slide.on('slidePageChanged', (page) => {
			console.log('CurrentPage changed to => ', page)
		})
	}, 300)

	const [
		{ code: vCode, data: { video_list = [] } },
	] = await Promise.all([
		proxy.$http.getInterestVideoList()
	])
	if (vCode === 0) {
		const { video_url: firstVideoUrl } = video_list && video_list[currentIndex.value]
		reactData.videoList = video_list
	}
})

const getCurrentVideoSrc = computed(() => {
	if(!reactData.videoList.length ) return ''
	return reactData.videoList[currentPageIndex.value].video_url
})

const { videoList } = toRefs(reactData)

</script>

<template>
	<view class="slide-vertical">
    <view class="vertical-wrapper">
      <view class="slide-vertical-wrapper" ref="slideRef">
		 <view class="ignore-content">
       		 The Blue area is not taken as BetterScroll's content
     	 </view>
		 <view>
		  <view v-for="(item,id) in videoList" :key="id" class="slide-page">
			<view class="slide-page-footer">
				<view class="slide-page-footer-left u-flex u-flex-middle">
					<view class="u-flex u-flex-middle">
					<u-avatar :src="item.shop_logo" size="36"/>
					<p class="slide-page-footer-shopName u-line-1">{{ item.shop_name }}</p>
					</view>
					<view class="u-flex slide-page-footer-attention">
						关注
					</view>
				</view>
				<view class="u-flex u-flex-middle u-flex-1">
					<u-icon
					 v-for="icon in filterItemData(item)" 
					 class="u-m-l-20" 
					 :name="icon.iconName" 
					 size="28" 
					 space="0"
					 color="#fff" 
					 labelColor="" 
					 :label="icon.count" 
					 labelPos="bottom"/>
				</view>
			</view>
		</view>
		 </view>
     
      </view>
    </view>
  </view>

     <video class="video-player" 
	 controls="false"
	 :autoplay="true"
	  id="myVideo"
	 :src="getCurrentVideoSrc"
     :show-center-play-btn="true"
	></video>
</template>



<style lang="scss" scoped>
.slide-vertical{
	height:calc(100vh - 80upx);
  .vertical-wrapper{
    position:relative;
    height:100%;
    font-size:0;
	z-index: 10;
  .slide-vertical-wrapper{
    height:100%;
    overflow:hidden;
    .slide-page{
      display:inline-block;
      width:100%;
      line-height:200px;
      text-align:center;
      font-size:26px;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;
	  color:#fff;
	  position: relative;
	  box-sizing: border-box;
	  height:calc(100vh - 80upx);
	  &-footer{
		position: absolute;
		bottom: 0;
		z-index: 200;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		&-shopName{
			font-size: 14px;
			color:#fff;
			font-weight: 500;
			margin-left: 8upx;
			line-height: 1;
			width: 220upx;
			text-align: left;
		}
		&-attention{
			font-size: 24upx;
			color:#fff;
			line-height: 1;
			flex-shrink: 0;
			background-color: #FF2442;
			padding: 12upx 22upx;
			border-radius: 200upx;
			text-align: center;
			margin-right: 20upx;

		}
	  }
	}
	}
	}
}
.video-player{
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	z-index: 0;
	// height: 600upx;
}
</style>
